<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>课程管理</title>
		<meta name="description" content="">
		<meta name="author" content="templatemo">
		<!-- 
    Visual Admin Template
    http://www.templatemo.com/preview/templatemo_455_visual_admin
    -->
		<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,700' rel='stylesheet' type='text/css'>
		<link href="${pageContext.request.contextPath}/back/css/font-awesome.min.css" rel="stylesheet">
		<link href="${pageContext.request.contextPath}/back/css/bootstrap.min.css" rel="stylesheet">
		<link href="${pageContext.request.contextPath}/back/css/templatemo-style.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="../WebTools/DB/comments.css" />
		<!-- 表单 -->
		<link rel="stylesheet" href="${pageContext.request.contextPath}/back/css/css/bootstrap-responsive.min.css" />
		<!--<link rel="stylesheet" href="${pageContext.request.contextPath}/back/css/css/uniform.css" />-->
		<link rel="stylesheet" href="${pageContext.request.contextPath}/back/css/css/select2.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/back/css/css/matrix-style.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/back/css/css/matrix-media.css" />
		<%-- <link href="${pageContext.request.contextPath}/back/css/font-awesome.css" rel="stylesheet" /> --%>
		<!-- <link href="https://hanlei525.github.io/layui-v2.4.3/layui/css/layui.css" rel="stylesheet" /> -->
		<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" type="text/css" href="../WebTools/tapmodo-Jcrop/css/jquery.Jcrop.css" />
		<script src="" type="text/javascript" charset="utf-8"></script>

		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

		<style type="text/css">
			#img3 {
				/*width: 100px;*/
				height: 100%;
				/*border-radius: 50px;*/
			}
			
			.jrcopfit {
				margin: 0 auto;
			}
			/*.jcrop-holder {
				height: 300px;
				width: initial;
			}*/
			/*.jcrop-tracker {
				height: 300px;
				width: initial;
			}*/
			/*.img-thumbnail {
				height: 300px;
				width: initial;
			}*/
			
			.cutImgPanel {
				height: 430px;
			}
			/*.cutImgPanel * {
				height: 100%;
				width: unset;
			}*/
		</style>
	</head>

	<body>
		<!-- Left column -->
		<div class="templatemo-flex-row">
			<div class="templatemo-sidebar">
				<header class="templatemo-site-header">
					<div class="square"></div>
					<h1>爱学习后台</h1>
				</header>
				<div class="profile-photo-container">
					<img src="images/logo.jpg" alt="Profile Photo" class="img-responsive">
					<div class="profile-photo-overlay"></div>
				</div>
				<!-- Search box -->

				<div class="mobile-menu-icon">
					<i class="fa fa-bars"></i>
				</div>
				<nav class="templatemo-left-nav">
					<ul>
						<li>
							<a href="${pageContext.request.contextPath}/back/index.jsp"><i class="fa fa-home fa-fw"></i>教师管理</a>
						</li>

						<li>
							<a href="${pageContext.request.contextPath}/back/course-management.jsp" class="active"><i class="fa fa-database fa-fw"></i>课程管理</a>
						</li>
						<li>
							<a href="${pageContext.request.contextPath}/back/manage-users.jsp"><i class="fa fa-map-marker fa-fw"></i>用户管理</a>
						</li>

						<li>
							<a href="${pageContext.request.contextPath}/back/user.jsp"><i class="fa fa-sliders fa-fw"></i>注册人数查看</a>
						</li>
						<li>
							<a href="${pageContext.request.contextPath}/ManagerServlet?op=logout"><i class="fa fa-eject fa-fw"></i>退出</a>
						</li>
					</ul>
				</nav>
			</div>
			<!-- Main content -->
			<div class="templatemo-content col-1 light-gray-bg">
				<div class="templatemo-top-nav-container">
					<div class="row">
						<h2>欢迎：${sessionScope.managerName}</h2>
					</div>
				</div>
				<div class="templatemo-content-container">
					<div class="templatemo-content-widget no-padding">
						<div id="DataTables_Table_0_length" class="dataTables_length">
							<label>每页 <!-- 下拉框 --> <select style="width: 50px"
							id="selectPageSize">
								<option value="3">3</option>
								<option value="5">5</option>
								<option value="10">10</option>
						</select> 条
						   &nbsp;
						</label> <label> <span>文章标题:</span>
						    <input type="text" aria-controls="DataTables_Table_0" id="kw" value="">
							<button type="button" class="btn btn-success btn-mini" id="searchBtn">搜索</button>
							<button type="button" class="btn btn-info btn-mini" id="clearSearchBtn">清除搜索</button>
							<button type="button" class="btn btn-info btn-mini" data-toggle="modal" data-target="#addCourseModal" onclick="initAddCourseModal()" id="addCourseBtn">新增课程</button>
						</label>

						</div>

						<div class="panel panel-default table-responsive">
							<table class="table table-striped table-bordered templatemo-user-table" id="table">
								<thead>
									<tr>
										<th style="width:17%">课程名</th>
										<th style="width:11%">任课教师</th>
										<th style="width:9%">课程价格</th>
										<th>课程发布时间</th>
										<th style="width:10%">支付方式</th>
										<th style="width:15%">课程简介</th>
										<th style="width:15%">编辑</th>
									</tr>
								</thead>
								<tbody id="courseBody">

								</tbody>
							</table>

							<div class="dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi ui-buttonset-multi paging_full_numbers" style="margin-bottom: 3px;" id="DataTables_pageInfo">

								<!-- 分页信息通过脚本动态生成 -->
								<!-- 
								<span id="pageInfo" data-pagenum=""  data-pagesize=""  data-pagetotal=""  data-pagepages="">每页3条 共10条 第1/4页</span>
								
								<a tabindex="0"class="first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default"
									id="DataTables_Table_0_first">首页</a>
									
								<a tabindex="0" class="previous fg-button ui-button ui-state-default"
									id="DataTables_Table_0_previous">上一页</a>
									
								<span>
									<a tabindex="0"class="fg-button ui-button ui-state-default">1</a>
									<a tabindex="" class="fg-button ui-button ui-state-default">2</a>
									<a tabindex="" class="fg-button ui-button ui-state-default">3</a>
								</span>
								
								<a tabindex="0"
									class="next fg-button ui-button ui-state-default"
									id="DataTables_Table_0_next">下一页</a>
								
								<a tabindex="0"
									class="last ui-corner-tr ui-corner-br fg-button ui-button ui-state-default"
									id="DataTables_Table_0_last">尾页</a> -->
							</div>
						</div>

					</div>

				</div>

			</div>
			<!-- Button trigger modal -->

			<!-- Modal -->
			<div class="modal fade" id="updateCourseModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="myModalLabel">Modal title</h4>
						</div>
						<form action="../CourseServletForyd" method="post" id="updateForm">
							<input type="hidden" name="op" id="op" value="updateCourseById" />
							<div class="modal-body">
								<div class="form-group">
									<label for="updateCourseTitle">修改课程名</label>
									<input type="text" class="form-control" name="updateCourseTitle" id="updateCourseTitle" value="" />
								</div>
								<div class="form-group">
									<label for="updateCoursePrice">修改价格</label>
									<input type="number" class="form-control" name="updateCoursePrice" id="updateCoursePrice" min="0.0" max="30000.0" step="0.1" value="0.0">
								</div>
								<div class="form-group">
									<label for="updateCoursePrice">修改支付方式</label>
									<div class="form-control">
										<label for="justAlipay">仅支付宝</label><input style="display: inline;" type="radio" name="payType" id="justAlipay" value="1" />
										<label for="justIntegral">仅积分</label><input style="display: inline;" type="radio" name="payType" id="justIntegral" value="2" />
										<label for="bothPay">支付宝和积分</label><input style="display: inline;" type="radio" name="payType" id="bothPay" value="3" />
									</div>

								</div>
								<div class="form-group">
									<label for="updateCoursePrice">修改简介</label>
									<div class="" id="EditorPanel" style="height: 50%">

									</div>
									<input type="hidden" name="introdu" id="introdu" value="" />
									<input type="hidden" name="updateCourseId" id="updateCourseId" value="" />
								</div>

							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
								<button type="button" id="updateBtn" class="btn btn-primary" onclick="doUpdate()">确定</button>
							</div>
						</form>
					</div>
				</div>
			</div>
			<!-- Button trigger modal -->

			<!-- Modal -->
			<div class="modal fade" id="addCourseModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog modal-lg" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="myModalLabel">添加课程</h4>
						</div>

						<form action="" method="post" id="addForm" enctype="multipart/form-data">
							<div class="modal-body" style="height: 580px;">
								<div class="col-lg-4 col-md-4">
									<input type="hidden" name="op" id="op" value="addCourse" />
									<input type="hidden" name="pic-x" id="pic-x" value="0" />
									<input type="hidden" name="pic-y" id="pic-y" value="0" />
									<input type="hidden" name="destWidth" id="destWidth" value="0" />
									<input type="hidden" name="destHeight" id="destHeight" value="0" />
									<input type="hidden" name="finalWidth" id="finalWidth" value="0" />
									<input type="hidden" name="finalHeight" id="finalHeight" value="0" />
									<input type="hidden" name="addIntrodu" id="addIntrodu" value="" />
									<div class="form-group">
										<label for="addCourseTitle">课程名</label>
										<input type="text" class="form-control" name="addCourseTitle" id="addCourseTitle" value="" />
									</div>
									<div class="form-group">
										<label for="addCoursePrice">价格</label>
										<input type="number" class="form-control" name="addCoursePrice" id="addCoursePrice" min="0.0" max="30000.0" step="0.1" value="0.0">
									</div>
									<div class="form-group">
										<label for="teacherId">教师编号</label>
										<input type="text" class="form-control" name="teacherId" id="teacherId" value="" />
									</div>

									<div class="form-group">
										<label for="updateCoursePrice">简介</label>
										<div class="" id="addEditorPanel" style="height: 50%">

										</div>

									</div>
									<div class="form-group">
										<label for="facePicture">选择展示图</label>
										<input type="file" class="form-control" name="facePicture" onchange="setImagePriview()" id="facePicture" accept="image/jpg,image/jpeg,image/png">
									</div>
									<div class="form-group">
										<label for="upLoadVideo">上传视频</label>
										<input type="file" class="form-control" name="upLoadVideo" multiple="multiple" id="upLoadVideo" accept="video/*">
									</div>
									<div class="form-group">
										<label for="">支付方式</label>
										<div class="form-control">
											<label for="addjustAlipay">仅支付宝</label><input style="display: inline;" type="radio" name="addpayType" id="addjustAlipay" value="1" />
											<label for="addjustIntegral">仅积分</label><input style="display: inline;" type="radio" name="addpayType" id="addjustIntegral" value="2" />
											<label for="addbothPay">支付宝和积分</label><input style="display: inline;" type="radio" name="addpayType" id="addbothPay" value="3" />
										</div>
									</div>
								</div>
								<div class="col-md-8 col-lg-8">
									<div class="form-group">
										<label for="addTab">添加课程标签</label>
										<input type="text" class="form-control" name="addTab" id="addTab" value="" placeholder="添加关键词,用空格分隔开" />
									</div>
									<div class="cutImgPanel text-center">

									</div>
								</div>
							</div>

						</form>
						<div class="modal-footer col-12">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							<button type="button" class="btn btn-primary" onclick="doInsert()">添加</button>
						</div>
					</div>
				</div>
			</div>
			<div class="modal fade" id="upLoadingModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<!--<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
							<h4 class="modal-title" id="myModalLabel">提示</h4>
						</div>
						<div class="modal-body text-center">
							<h3>上传中</h3>
							<div class="progress">
								<div class="progress-bar progress-bar-success active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
								</div>
							</div>
						</div>
						<div class="modal-footer">
							<!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
							<button type="button" class="btn btn-primary">Save changes</button>-->
						</div>
					</div>
				</div>
			</div>

			<!-- JS -->
			<!--<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>-->
			<!-- jQuery -->
			<!--<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>-->
			<!--  jQuery Migrate Plugin -->
			<!-- <script type="text/javascript" src="https://www.google.com/jsapi"></script> Google Chart -->
			<!-- 表单需要 -->
			<script src="${pageContext.request.contextPath}/back/js/js/jquery.min.js"></script>
			<script src="${pageContext.request.contextPath}/back/js/js/jquery.ui.custom.js"></script>
			<script src="${pageContext.request.contextPath}/back/js/js/bootstrap.min.js"></script>
			<!--<script src="${pageContext.request.contextPath}/back/js/js/jquery.uniform.js"></script>-->
			<script src="${pageContext.request.contextPath}/back/js/js/select2.min.js"></script>
			<script src="${pageContext.request.contextPath}/back/js/js/jquery.dataTables.min.js"></script>
			<script src="${pageContext.request.contextPath}/back/js/js/matrix.js"></script>
			<!--<script src="${pageContext.request.contextPath}/back/js/js/matrix.tables.js"></script>-->
			<script src="${pageContext.request.contextPath}/back/js/layer/layer.js"></script>
			<script src="../WebTools/DB/tools.js" type="text/javascript" charset="utf-8"></script>
			<script type="text/javascript" src="${pageContext.request.contextPath}/back/js/templatemo-script.js"></script>
			<script src="../WebTools/wangEditor-3.1.1/release/wangEditor.js" type="text/javascript" charset="utf-8"></script>
			<script type="text/javascript" src="../WebTools/DB/comments.js"></script>
			<script type="text/javascript" src="../WebTools/tapmodo-Jcrop/js/jquery.Jcrop.js"></script>
			<script type="text/javascript">
				function initAddCourseModal() {
					$('.cutImgPanel').empty();
					//					document.getElementById('addForm').reset();
					$('#addForm')[0].reset();

				}

				function Addparams(coords) {
					//					console.log(coords)
					//					console.log($('.cutImgPanel img').css('width'))
					//					console.log($('.cutImgPanel img').css('height'))
					$('#pic-x').val(coords.x);
					$('#pic-y').val(coords.y);
					$('#destWidth').val(coords.w);
					$('#destHeight').val(coords.h);
					$('#finalWidth').val($('.cutImgPanel img').css('width').replace(/px/g, ''));
					$('#finalHeight').val($('.cutImgPanel img').css('height').replace(/px/g, ''));
					//					fixImg(coords);
				}

				function iniJcrop() {
					$('#cutImg').Jcrop({
						addClass: 'jrcopfit',
						onChange: Addparams,
						onSelect: Addparams,
						aspectRatio: 1
					});
				}
				//图片预览
				// 选择文件的改变事件,生成图片预览功能
				function setImagePriview() {
					// 得到文件列表数组,获取数组中的第一个文件
					var file = document.getElementById("facePicture").files[0];
					// 没有选择文件
					if(file == null) {
						//						document.getElementById("img3").src = "images/2.png";
						$('.cutImgPanel').html("");
						//						$('.cutImgPanel').append('<img src="images/2.png" id="cutImg" class="mx-auto" style="height: 400px;" />')
						//					document.getElementById("cutImg").src = this.result;
						iniJcrop();
					} else {
						// 构建一个文件渲染对象
						var reads = new FileReader();
						// FileReader.readAsDataURL 读取指定Blob或File的内容
						reads.readAsDataURL(file);
						// 获取文件数据
						reads.onload = function() {
							// 显示图片
							//							document.getElementById("img3").src = this.result;
							$('.cutImgPanel').html("");
							$('.cutImgPanel').append('<img src="' + this.result + '" id="cutImg" class="mx-auto" style="height: auto;width: auto; max-width: 100%;max-height: 100%; " />');
							//					document.getElementById("cutImg").src = this.result;
							iniJcrop();
						}
					}

				}

				/**
				 * 添加课程程序
				 */
				function doInsert() {
					//					console.log($('#addCourseModal .w-e-text').text().trim());
					//					console.log()

					if($('#addCourseModal .w-e-text').text().trim() != '') {
						$('#addIntrodu').val($('#addCourseModal .w-e-text').html());
					} else {
						$('#addIntrodu').val('')
					}
					if($('#addCourseTitle').val().trim() != '' && $('#addCoursePrice').val() != '') {
						sendInsertAjax();
					} else {
						layer.msg('请仔细填写表单');
					}
				}

				/**
				 * 发送添加课程AJAX
				 */
				function sendInsertAjax() {
					$.ajax({
						beforeSend: function() {
							$('#upLoadingModal').modal();
						},
						type: "post",
						url: "../CourseServletForyd",
						processData: false,
						contentType: false,
						data: new FormData($('#addForm')[0]),
						success: function(data) {
							if(data == '1') {
								$('#upLoadingModal').modal('hide');
								layer.msg('添加成功');

								$('#addCourseModal').modal('hide');
								document.getElementById("addForm").reset();
								$('.cutImgPanel').empty();
								sendAjax(1);
							} else if(data == '2') {
								$('#upLoadingModal').modal('hide');
								layer.msg('上传视频失败');
							} else {
								$('#upLoadingModal').modal('hide');
								layer.msg('添加失败');
							}
						},
						error: function() {
							$('#upLoadingModal').modal('hide');
							layer.msg('出错了');
						}
					});

				}

				/**
				 * 执行更新流程
				 */
				function doUpdate() {
					if($('#updateCourseModal .w-e-text').text().trim() != '') {
						$('#introdu').val($('#updateCourseModal .w-e-text').html());
					} else {
						$('#introdu').val('')
					}
					if($('#updateCourseTitle').val().trim() != '' && $('#updateCoursePrice').val() != '') {
						sendUpdateAjax();
					} else {
						layer.msg('请仔细填写表单');
					}

				}

				/**填充更新模态框
				 * @param {Object} obj
				 */
				function fillUpdateModal(obj) {
					$('#updateCourseTitle').val($(obj).data('course-title'));
					$('#updateCoursePrice').val($(obj).data('course-price'));
					$('#updateCourseModal .w-e-text').html($(obj).data('content'));
					switch($(obj).data('paytype')) {
						case 1:
							$('#justAlipay').prop('checked', true);
							break;
						case 2:
							$('#justIntegral').prop('checked', true);
							break;
						case 3:
							$('#bothPay').prop('checked', true);
							break;
						default:
							break;
					}
					$('#updateCourseId').val($(obj).data('course-id'));
					$('#updateCoursePrice').val($(obj).data('course-price'));
				}

				function sendUpdateAjax() {
					$.ajax({
						type: "post",
						url: "../CourseServletForyd",
						data: $('#updateForm').serialize(),
						success: function(data) {
							if(data == 'true') {
								layer.msg('修改成功');
								$('#updateCourseModal').modal('hide');
								sendAjax(1);

							} else {
								layer.msg('修改失败');
							}
						},
						error: function() {}
					});
				}
				$(document).ready(function() {
					//					if('${sessionScope.managerName}' == null || '${sessionScope.managerName}' == '') {
					//						location.href = "login.jsp";
					//					}
					iniJcrop();
					initEditorWithFont('addEditorPanel');
					initEditorWithFont('EditorPanel');
					//1.一进入页面 发送ajax请求-响应课程列表
					sendAjax(1);
					// 2.首页
					$(document).on("click", "#first", function() {
						// 调用发送异步请求的方法,参数是页码
						sendAjax(1);
					});
					// 3.尾页
					$(document).on("click", "#last", function() {
						// 获取总页数
						var lastPageNum = $("#pageInfo").data("pagepages");
						var pageNum = lastPageNum;
						// 调用发送异步请求的方法,参数是页码
						sendAjax(pageNum);
					});

					// 4.上一页
					$(document).on("click", "#previous", function() {
						// 获取当前页
						var currentPageNum = $("#pageInfo").data("pagenum");
						if(currentPageNum == 1) {
							//提示层

							layer.msg('已经是第一页,没有上一页!');

						} else {
							var pageNum = parseInt(currentPageNum) - 1;
							// 调用发送异步请求的方法,参数是页码
							sendAjax(pageNum);
						}

					});

					// 5.下一页
					$(document).on("click", "#next", function() {
						// 获取当前页
						var currentPageNum = $("#pageInfo").data("pagenum");
						// 获取总页数
						var lastPageNum = $("#pageInfo").data("pagepages");
						if(currentPageNum == lastPageNum) {
							layer.msg('已经是最后一页,没有下一页!');
						} else {
							var pageNum = parseInt(currentPageNum) + 1;
							// 调用发送异步请求的方法,参数是页码
							sendAjax(pageNum);
						}

					});

					// 6.页码点击事件
					$(document).on("click", ".current", function() {
						var pageNum = $(this).text();
						// 调用发送异步请求的方法,参数是页码
						sendAjax(pageNum);
					});

					// 7.选择显示记录数的下拉框事件
					$(document).on("change", "#selectPageSize", function() {
						// 调用发送异步请求的方法,参数是页码
						sendAjax(1);
					});

					// 8.搜索事件
					$(document).on("click", "#searchBtn", function() {
						// 调用发送异步请求的方法,参数是页码
						sendAjax(1);
					});

					// 9.清除搜索事件
					$(document).on("input", "#kw", function() {
						sendAjax(1);
					});
					$(document).on("click", "#clearSearchBtn", function() {
						$("#kw").val("");
						sendAjax(1);
					});
					//10.修改事件
					$(document).on("click", "#upd", function() {

					});

					//11.删除事件
					$(document).on("click", "#dele", function() {
						var courseId = $(this).data("courseid");
						layer.confirm('是否确认删除？', {
							btn: ['确认', '取消'] //按钮
						}, function() {
							$.ajax({
								async: true,
								url: "${pageContext.request.contextPath}/CourseServletForyd",
								type: "GET",
								data: {
									op: "deleteCourseById",
									courseTitle: $("#kw").val(),
									pageNum: $('#pageInfo').data("pagenum"),
									pageSize: $("#selectPageSize").val(),
									courseId: courseId
								},
								dataType: "json",
								success: function(result, status, xhr) {
									layer.msg('删除成功', {
										icon: 1,
										time: 1000
									});
									// 调用数据渲染的方法
									showData(result);
								},
								error: function(xhr, status, error) {
									layer.msg('请求失败');
								}
							});
						});
					});
				});
				//发送请求的函数
				function sendAjax(pageNum) {
					$.ajax({
						async: true,
						url: "${pageContext.request.contextPath}/CourseServletForyd",
						type: "GET",
						data: {
							op: "getCourseListByPage",
							courseTitle: $("#kw").val(),
							pageNum: pageNum,
							pageSize: $("#selectPageSize").val()
						},
						dataType: "json",
						success: function(result, status, xhr) {
							// 调用数据渲染的方法
							showData(result);
						},
						error: function(xhr, status, error) {
							layer.msg('请求失败');
						}
					});

				}

				$()
				// 渲染数据的函数
				function showData(result) {

					//清空表格原始数据
					$('#courseBody').empty();
					//清空分页信息数据
					$("#DataTables_pageInfo").empty();
					//填充表格信息
					$.each(result.data, function(index, course) {
						var content = '暂无简介';
						var payType = '';
						var teacherName = '佚名';
						if(course.course_introdu != null && course.course_introdu != '') {
							content = contentCut(toPureString(course.course_introdu), 20);
						}
						if(course.teacher.teacher_name != null) {
							teacherName = course.teacher.teacher_name;
						}
						switch(course.pay_type) {
							case 1:
								payType = '仅支付宝';
								break;
							case 2:
								payType = '仅积分';
								break;
							case 3:
								payType = '支付宝及积分';
								break;
							default:
								break;
						}
						$('#courseBody').append(" <tr> " +
							"<td><a href='${pageContext.request.contextPath}/CourseServletForyd?op=toSingleCoursePage&courseId=" + course.course_id + "'>" + course.course_title + "</a></td>" +
							"<td>" + teacherName + "</td>" +
							"<td>" + course.course_price + "</td>" +
							"<td>" + course.course_create_time + "</td>" +
							"<td>" + payType + "</td>" +
							"<td class='course-intro-td'>" + course.course_introdu + "</td>" +
							"<td><button type=\"button\" data-toggle=\"modal\"" +
							'data-course-id="' + course.course_id + '" data-course-title="' + course.course_title + '" data-course-price="' + course.course_price +
							'"data-paytype="' + course.pay_type + '"data-content=\'' + course.course_introdu + '\' ' +
							"data-target=\"#updateCourseModal\" class=\"btn btn-default\" onclick=\"fillUpdateModal(this)\">修改</button>" +
							"<button type=\"button\" class=\"btn btn-default\" id=\"dele\" data-courseid=\"" + course.course_id + "\">删除</button>" +
							"</td>" +
							"</tr> ");
					});
					var e = $('.course-intro-td');
					for(i = 0; i < e.length; i++) {
						if(e[i].innerText == '') {
							$(e[i]).text('暂无简介');
						} else {
							$(e[i]).text(contentCut(e[i].innerText, 20));
						}

					}
					//填充分页信息
					var x = "<span style=\"margin-right:10px;\" id=\"pageInfo\" data-pagenum=\"" +
						result.pageNum + "\"  data-pagesize=\"" +
						result.pageSize + "\"  data-pagetotal=\"" +
						result.total + "\"  data-pagepages=\"" +
						result.pages + "\">每页" + result.pageSize + "条 共" + result.total + "条 第" + result.pageNum + "/" + result.pages + "页</span>";
					//首页 上一页
					x += "<a tabindex=\"0\"class=\"first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default\" id=\"first\">首页</a>" +
						"<a tabindex=\"0\" class=\"previous fg-button ui-button ui-state-default\" id=\"previous\">上一页</a>";
					//页码显示
					for(var i = 1; i <= result.pages; i++) {
						// 判断i==当前页,添加样式ui-state-disabled不可以用,激活状态
						if(i == result.pageNum) {
							x += "<a tabindex=\"0\" class=\"fg-button ui-button ui-state-default ui-state-disabled\" style=\"background:#08c\">" + i + "</a>";
						} else {
							x += "<a tabindex=\"0\" class=\"fg-button ui-button ui-state-default current\">" + i + "</a>";
						}

					}
					//下一页 尾页
					x += "<a tabindex=\"0\"class=\"ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default\" id=\"next\">下一页</a>" +
						"<a tabindex=\"0\" class=\"last previous fg-button ui-button ui-state-default\" id=\"last\">尾页</a>";
					$("#DataTables_pageInfo").append(x);

				}
			</script>
	</body>

</html>